import React,{useEffect, useState} from 'react'
import { 
  Button,
  Table,
  Space
} from 'antd'
import { request } from 'umi'
import {ArrayToTree, move} from '@/utils'

export default function MenuTable() {
  const [tableList, setTableList] = useState([])
  const [lists, setLists] = useState([])

  /** 发送请求获取初始数据 */
  const getData =async () => {
    const res = await request('/api/user')
    setLists([...res.data])
    const data = [...ArrayToTree(JSON.parse(JSON.stringify(res.data)))]
    setTableList(data)
  }
  useEffect(() => {
    getData()
  }, [])

  /** 删除数据 以及子数据 */
  const remove = (record) => {
    const newData = lists.filter(item => {
      if(item.key === record.key || item.parentId === record.key){
        return 
      }else{
        return item
      }
    })
    setLists([...newData])
    setTableList([...ArrayToTree([...JSON.parse(JSON.stringify(newData))])])
  }

  /** 添加下级 */
  const add = (record) => {
    if(!record.key){
      const key = Math.max(...lists.map(item => item.key)) + 1 || 0
      const obj = {key, menuName: `新增数据${key}`, menuPath: `/${key}`, components: `/${key}`, parentId: record.key}
      const newArr = [...lists, obj]
      setLists(newArr)
      setTableList([...ArrayToTree([...JSON.parse(JSON.stringify(newArr))])])
    }else{
      const key = Math.max(...lists.map(item => item.key)) + 1 || 0
      const obj = {key, menuName: `新增数据${key}`, menuPath: `/${key}`, components: `/${key}`}
      const newArr = [...lists, obj]
      setLists(newArr)
      setTableList([...ArrayToTree([...JSON.parse(JSON.stringify(newArr))])])
    }
   
  }

  /** 上移 */
  /** 在key所在的数组 */
  let a;
  const getIndex = (id, arr) => {
    if(arr.some(item => item.key === id)){
      return arr
    }else{
      arr.forEach(item => {
        if(!item.children) return
        a = getIndex(id, item.children)
      })
    }
    return a
  }

  const up = (record) => {
    const index = getIndex(record.key, tableList).findIndex(item => item.key === record.key)
    move(getIndex(record.key, tableList), index, index - 1)
    setTableList([...tableList])
  }
  const down = (record) => {
    /** 第一层 */
    const index = getIndex(record.key, tableList).findIndex(item => item.key === record.key)
    move(getIndex(record.key, tableList), index, index + 1)
    setTableList([...tableList])
  }
  const columns = [
    {
      title: '菜单名称',
      dataIndex: 'menuName',
      key: 'menuName',
    },
    {
      title: '菜单路径',
      dataIndex: 'menuPath',
      key: 'menuPath',
    },
    {
      title: '组件地址',
      dataIndex: 'components',
      key: 'components',
    },
    {
      title: '操作',
      key: 'action',
      render: (text, record) => (
        <Space size="middle">
          {
            getIndex(record.key, tableList).findIndex(item => item.key === record.key) === getIndex(record.key, tableList).length - 1
              ? '' :  <a onClick={() => down(record)} style={{color: 'red'}}>下移</a>
          }
          {
            getIndex(record.key, tableList).findIndex(item => item.key === record.key) === 0 
              ? '' :  <a onClick={() => up(record)} style={{color: 'orange'}}>上移</a>
          }
          <a onClick={() => add(text, record)}>新建下级</a>
          <a>菜单查询权限用户</a>
          <a onClick={() => remove(record)}>删除</a>
        </Space>
      )
    }
  ];
  return (
    <div>
      <Button onClick={add}>新建下级</Button>
      <Table
        columns={columns}
        indentSize={30}
        dataSource={tableList}
      />
    </div>
  )
}
 